import React, { FC } from 'react';
import { Routes, Route } from 'react-router-dom';
import { Navbar } from '@/components';
import { navs, routes, IRoute } from './router';

const App: FC = () => {
  return (
    <div className='app'>
      <Navbar items={ navs } />
      <Routes>
        { mapRoutes(routes) }
      </Routes>
    </div>
  );
};

function mapRoutes(routes: IRoute[]) {
  return routes.map(({ path, element, children, index }) => (
    <Route
      key={ path }
      path={ path }
      element={ element }
      index={ index }
    >
      { children && mapRoutes(children) }
    </Route>
  ));
}

export default App;
